<template>
  <view>
    <view
      class="load"
      style="
        color: rgb(243, 69, 115);
        background-image: url('/static/load_bg_1.png');
      "
    >
      <view
        class="content flex-center-center"
        style="background-color: rgb(254, 214, 223)"
      >
        <image
          class="load_out"
          src="@/static/load_out_1.png"
          :draggable="false"
        />
        <image
          class="load_in"
          src="@/static/load_in_1.png"
          :draggable="false"
        />
        <image
          class="load_scan"
          src="@/static/load_scan.png"
          :draggable="false"
        />
        <image class="temp-path" mode="aspectFill" :src="params.tempPath" />

        <view class="loading">
          <view class="errorTips">{{
            loading ? loading : "图片上传中..."
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BASE_URL, POST_IMG_URL } from "@/config";
import { getFaceInfo } from "@/api";
export default {
  data() {
    return {
      params: {
        phone: "",
        code: "",
        url: "",
        tempPath: "",
      },
      loading: "",
    };
  },
  onLoad() {
    const params = uni.getStorageSync("submit-data");
    this.params = params;
    this.updateImg(this.params.tempPath);
  },
  methods: {
    updateImg(imgPath) {
      uni.uploadFile({
        url: BASE_URL + "/pushimg",
        filePath: imgPath,
        name: "file",
        success: (res) => {
          if (!res.data) {
            return (this.loading = "服务器错误");
          }
          const data = JSON.parse(res.data);
          if (data.code !== "000000") {
            return (this.loading = data.mesg);
          }
          const { phone, code, tempPath } = this.params;
          getFaceInfo({
            imgurl: POST_IMG_URL + data.data,
            code,
            phone,
          })
            .then((res) => {
              if (data.code !== "000000") {
                return (this.loading = data.mesg);
              }
              console.log(JSON.parse(res.data));
              uni.setStorageSync("resultData", res.data);
              uni.redirectTo({
                url: `/pages/result/result`,
              });
            })
            .catch((err) => {
              console.log(err, "err");
              this.loading = err.mesg || err.message;
            });
          // uni.setStorageSync("submit-data", {
          //   phone,code,tempPath,
          // 	url: data.data,
          // });
          // uni.redirectTo({
          //   url: `/pages/result/result`,
          // });
        },
        fail: (err) => {
          console.log(err);
          return (this.loading = err.errMsg);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.load {
  background: rgb(254, 214, 223);
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
}
.content {
  position: fixed;
  top: 300rpx;
  left: 175rpx;
  width: 400rpx;
  image {
    width: 400rpx;
    height: 400rpx;
    position: absolute;
    top: 0rpx;
    left: 0;
    z-index: 10;
  }
  .load_out {
    animation: load_out_animation 3s linear infinite;
  }
  .load_in {
    top: 15rpx;
    left: 15rpx;
    width: 370rpx;
    height: 370rpx;
    animation: load_in_animation 3s linear infinite;
  }
  .load_scan {
    top: 80rpx;
    left: 70rpx;
    width: 250rpx;
    height: 15rpx;
    animation: load_scan_animation 3s linear infinite;
  }
  .temp-path {
    top: 30rpx;
    left: 30rpx;
    border-radius: 50%;
    width: 340rpx;
    height: 340rpx;
    z-index: 1;
  }
  .loading {
    position: absolute;
    top: 430rpx;
    left: 0;
    width: 100%;
    font-weight: bold;
    text-align: center;
  }
}
@keyframes load_out_animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes load_in_animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes load_scan_animation {
  0% {
    transform: translateY(0rpx);
  }
  25% {
    transform: translateY(110rpx);
  }
  50% {
    transform: translateY(220rpx);
  }
  75% {
    transform: translateY(110rpx);
  }
  100% {
    transform: translateY(0rpx);
  }
}
</style>
